import {Row, Col, Card} from 'antd'
import {DashboardTwoTone, FireTwoTone, WalletTwoTone, TagTwoTone, TagsTwoTone} from '@ant-design/icons';
import Emoji from "../../../components/Emoji/Emoji";
import Comments from "../../../components/Comments/Comments";
import {GetArticleList} from "../../../service/article";
import './pins.scss'
import {useEffect, useRef, useState} from "react";
import {AddModifyArticle} from "../../../service/article";
export default function Pins() {
    //左边结构
    const leftIconList = [
        {title: "最新", icon: <DashboardTwoTone style={{fontSize: "20px"}}/>},
        {title: "热门", icon: <FireTwoTone twoToneColor="#8a919f" style={{fontSize: "20px"}}/>},
        {title: "关注", icon: <WalletTwoTone twoToneColor="#8a919f" style={{fontSize: "20px"}}/>},
        {title: "我的圈子", icon: <TagTwoTone twoToneColor="#8a919f" style={{fontSize: "20px"}}/>},
        {title: "推荐圈子", icon: <TagsTwoTone twoToneColor="#8a919f" style={{fontSize: "20px"}}/>},
    ]
    //左边小结构
    const leftList = [
        {title: "内推招聘广场"},
        {title: "技术交流广场"},
        {title: "掘友请回答一下"},
        {title: "树洞一下"},
        {title: "摸鱼"},
        {title: "摸更多"},
    ]
    //参数
    let [GetArticleInfo, setArticleInfo] = useState({
        page: 1,
        type: 2
    })
    //记录总数量
    let [Count, setCount] = useState<number>()
    let CountRef = useRef(Count)
    CountRef.current = Count
    let ArticleInfoRef = useRef(GetArticleInfo)
    ArticleInfoRef.current = GetArticleInfo
    //遍历的数据
    let [ArticleList, setArticleList] = useState<any>([])

    /**
     * 获取评论列表
     */
    function getComments() {

        GetArticleList(GetArticleInfo).then(res => {
            setCount(res.data.count)
            setArticleList((preValue: any) => [...preValue, ...res.data.data])
        })
    }

    /**
     * 懒加载
     */
    let timer=true
    function lazyList() {
        let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度
        if (scrollHeight - scrollTop === clientHeight && CountRef.current) {
            if(!timer){
                return
            }
            timer=false
            setTimeout(()=>{
                if (ArticleInfoRef.current.page < CountRef.current! / 10) {
                    let NewArr = GetArticleInfo
                    NewArr.page += 1
                    setArticleInfo(NewArr)
                    getComments()
                    timer=true
                }
            },500)
        }
    }
    useEffect(() => {
        getComments()
        window.addEventListener("scroll", lazyList)
    }, [GetArticleInfo])
    return (
        <Row>
            {/*左边*/}
            <Col offset={4}>
                <Card style={{width: 250}}>
                    {
                        leftIconList.map((item: any, index: number) => {
                            return <div key={item.title} className={index === 0 ? "icon_list active" : "icon_list"}>
                                {item.icon}
                                <div className="icon_text">{item.title}</div>
                            </div>
                        })
                    }
                    <div className="change">
                        {
                            leftList.map((item: any) => {
                                return <div key={item.title} className="titleText">{item.title}</div>
                            })
                        }
                    </div>
                </Card>
            </Col>
            {/*    中间的评论区*/}
            <Col>
                {/*评论区*/}
                <div>
                    {/*顶部发表评论*/}
                    <Card style={{marginBottom: "10px", marginTop: "15px"}}>
                        <Emoji width={650} inputValue={publish} height={200}
                               placeholder="快和掘友一起分享新鲜事！告诉你个小秘密，发布沸点时添加圈子和话题会被更多掘友看到哦～"/>
                    </Card>
                    {
                        ArticleList.map((item: any) => {
                            return <Card className="comments" key={item.article_id}>
                                <Comments article={item} initData={initData}/>
                            </Card>
                        })
                    }
                </div>
            </Col>
        </Row>
    )
    /**
     * 初始化页面
     */
   async function  initData(){
        let newObj={...GetArticleInfo}
        newObj.page=1
        setArticleInfo(newObj)
        // GetArticleList(GetArticleInfo).then(res => {
        //     setCount(res.data.count)
        //     // setArticleList((preValue: any) => [...res.data.data])
        //     setArticleList([...res.data.data])
        // })
       let res=await GetArticleList(GetArticleInfo)
        setCount(res.data.count)
        setArticleList(res.data.data)
    }
    /**
     *
     * 点击发表评论获取Value
     */
    function publish(value: any) {
        let token=sessionStorage.getItem("token")
        console.log(value)
        AddModifyArticle({
            token,
            type:2,
            info:`<p>${value.value}</p><p>${value.img?value.img:""}</p>`,
            tags_name:["前端"]
        }).then((res:any)=>{
            if(res.code===2000){
                initData()
            }
        })
    }
}
